<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
	"http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<meta http-equiv="Content-type" content="text/html; charset=utf-8">
		<title>Relative testing</title>
		<!-- load latest build of jquery.js -->
		<script type="text/javascript" src="../../../../jquery/dist/jquery.js"></script>
		<!-- load testrunner from jquery project -->
		<script type="text/javascript" src="testrunner.js"></script>
		<!-- load dimensions.js (this is what we're testing! -->
		<script type="text/javascript" src="../../jquery.dimensions.js"></script>
		<style type="text/css" media="screen">
			body{ margin:0; border:0; padding:0; }
			h1,h2,p,#tests{display:none;position:absolute;}
			#rel1,#rel2,#rel3 { position:relative; margin:10px; border:2px solid #000; padding:5px; width:50px; height: 50px; }
			#rel1, #rel2, #rel3 { top:0; left:0; }
			#rel2 { overflow: auto; }
			.safari_bug_avoidance { width:0; height:0; overflow: hidden; }
		</style>
		
		<script type="text/javascript" charset="utf-8">
			$(window).bind('load', function() {
				runTest(function() {
					window.parent.done($('#tests').html());
				});
			});
			test('position(): Relative positioning', function() {
				var position = $('#rel1').position();
				equals( 0, position.top, "$('#rel1').position().top" );
				equals( 0, position.left, "$('#rel1').position().left" );
				
				position = $('#rel2').position();
				equals( 5, position.top, "$('#rel2').position().top" );
				equals( 5, position.left, "$('#rel2').position().left" );
				
				position = $('#rel3').position();
				equals( 5, position.top, "$('#rel3').position().top" );
				equals( 5, position.left, "$('#rel3').position().left" );
				
				// testing scroll offset
				$('#rel2')[0].scrollTop  = 10;
				$('#rel2')[0].scrollLeft = 10;
				position = $('#rel3').position();
				equals( 5, position.top, "Scroll offset of parent by 10 => $('#rel3').position().top" );
				equals( 5, position.left, "Scroll offset of parent by 10 => $('#rel3').position().left" );
				$('#rel2')[0].scrollTop  = 0;
				$('#rel2')[0].scrollLeft = 0;
			});
			
		</script>
	</head>
	<body>
		<div id="main">
			<div class="safari_bug_avoidance">Safari can be so annoying</div>
			<div id="rel1"><div class="safari_bug_avoidance">Safari can be so annoying</div>
				<div id="rel2"><div class="safari_bug_avoidance">Safari can be so annoying</div>
					<div id="rel3"></div>
				</div>
			</div>
		</div>
		<ol id="tests"></ol>
	</body>
</html>